<section class="example-viewer-wrapper" [ngClass]="{ expand: showCode }">
  <h2 class="example-viewer-title">{{ title }}</h2>
  <p class="example-viewer-description">{{ description }}</p>

  <div class="example-viewer-content">
    <section class="example-viewer-body">
      <ng-template #componentContent></ng-template>
    </section>

    <div *ngIf="codePath" class="example-viewer-code-icon-content">
      <i
        lv-icon="icon-toggle-source-code"
        lvColorState
        title="Toggle source code panel"
        (click)="toggleCode($event)"
        [class.example-viewer-code-show]="showCode"
      ></i>
    </div>

    <section *ngIf="codePath" class="example-viewer-code" [@viewerState]="showCode ? 'visible' : 'hidden'">
      <lv-radio-group [(ngModel)]="activeCodeType" (ngModelChange)="codeTypeChange($event)">
        <lv-group>
          <ng-container *ngFor="let option of typeOptions">
            <lv-radio [lvViewType]="'button'" [lvValue]="option.value">{{ option.label }}</lv-radio>
          </ng-container>
        </lv-group>
      </lv-radio-group>

      <i class="example-viewer-code-copy" lv-icon="icon-copy" lvColorState title="Copy source code" (click)="copyCode($event)"></i>

      <div #codePanel [id]="codeIdConfig[activeCodeType]" class="example-viewer-code-panel">
        <pre class="code-content-js language-typescript"></pre>
      </div>
    </section>
  </div>
</section>
